import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // 布局相关
    ['flex-center', 'flex justify-center items-center'],
    ['flex-between', 'flex justify-between items-center'],
    ['flex-start', 'flex justify-start items-center'],
    ['flex-end', 'flex justify-end items-center'],
    ['flex-col-center', 'flex flex-col justify-center items-center'],

    // 间距相关
    ['p-safe', 'p-4'],
    ['m-safe', 'm-4'],

    // 文本相关
    ['text-primary', 'text-blue-600'],
    ['text-success', 'text-green-600'],
    ['text-warning', 'text-yellow-600'],
    ['text-danger', 'text-red-600'],
    ['text-info', 'text-gray-600'],

    // 按钮相关
    ['btn-primary', 'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors'],
    ['btn-secondary', 'px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors'],
    ['btn-success', 'px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors'],
    ['btn-danger', 'px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors'],

    // 卡片相关
    ['card', 'bg-white rounded-lg shadow-md p-6'],
    ['card-header', 'border-b border-gray-200 pb-4 mb-4'],

    // 表单相关
    ['form-item', 'mb-4'],
    ['form-label', 'block text-sm font-medium text-gray-700 mb-1'],
    ['form-input', 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'],

    // 表格相关
    ['table', 'w-full border-collapse'],
    ['table-header', 'bg-gray-50 border-b border-gray-200'],
    ['table-cell', 'px-4 py-2 border-b border-gray-200'],

    // DIY页面专用快捷方式
    [
      'code-preview',
      'bg-gray-50 border border-gray-200 rounded p-3 font-mono text-xs leading-relaxed max-h-75 overflow-y-auto whitespace-pre-wrap break-words'
    ],
    ['generation-header', 'flex-center p-4 bg-gray-50 rounded-2 mb-5'],
    ['component-preview', 'min-h-50 p-4 border border-gray-200 rounded bg-gray-50'],
    ['component-wrapper', 'min-h-38 bg-white border-2 border-dashed border-gray-200 rounded p-5'],
    ['component-waiting', 'flex-center min-h-38 text-gray-400 italic'],
    ['generation-log', 'h-50 overflow-y-auto border border-gray-200 rounded p-3 bg-gray-50 font-mono text-xs leading-relaxed mb-4'],
    ['log-item', 'mb-1 break-words'],
    ['error-display', 'text-red-500 text-left'],
    ['error-pre', 'bg-red-50 p-3 rounded whitespace-pre-wrap break-words text-xs leading-relaxed m-0'],
    ['dialog-footer', 'flex justify-end gap-2']
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      collections: {
        // 可以添加图标集合
      }
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'Inter:400,500,600,700',
        mono: 'Fira Code:400,500,600'
      }
    })
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  theme: {
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a'
      }
    }
  },
  rules: [
    // 自定义规则
    ['shadow-soft', { 'box-shadow': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)' }],
    ['bg-gradient-primary', { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }]
  ],
  content: {
    filesystem: ['src/**/*.{vue,js,ts,jsx,tsx}', 'index.html']
  }
})
